<template>
	<view class="contain-main-box">
		<navigationTop navigationTitle="机房概览" :isBack="true" :isHome="true"></navigationTop>
	<view class="main-bg" >
		<!-- 机房概览 -->
		<!-- 顶部title -->
		<view class="top-title">
			<image :src="$store.state.baseImg + '/icon/powerSet.png'" mode="aspectFit" class="top-img"></image>
			<text class="top-text">{{roomName}}</text>
		</view>
		<!-- tab -->
		<!-- #ifdef APP-PLUS -->
		<template v-if="sysVersion < 8">
			<u-sticky offset-top="149" bg-color="rgba(255,255,255,0)" :h5-nav-height='0'>
				<view class="tab-bar" :style="{'background-color': hasFixed ? '#fff':'transparent'}">
					<view class="tabBar-box">
						<tabBar :tabList='tabList' @changeIndex="changeIndexTab"></tabBar>
					</view>
					<view class="changeList-icon" @tap="changeList" :style="{
				'background-image':'url('+$store.state.baseImg+'/icon/tab.png)'
			}"></view>
				</view>
			</u-sticky>
		</template>
		<template v-else>
			<view class="tab-bar" :style="{
				'background-color': hasFixed ? '#fff':'transparent',
				'position':'sticky',
				'top':'149rpx'
				}">
				<view class="tabBar-box">
					<tabBar :tabList='tabList' @changeIndex="changeIndexTab"></tabBar>
				</view>
				<view class="changeList-icon" @tap="changeList" :style="{
				'background-image':'url('+$store.state.baseImg+'/icon/tab.png)'
			}"></view>
			</view>
		</template>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="tab-bar" :style="{
			'background-color': hasFixed ? '#fff':'transparent',
			'position':'sticky',
			'top':'149rpx'
			}">
			<view class="tabBar-box">
				<tabBar :tabList='tabList' @changeIndex="changeIndexTab"></tabBar>
			</view>
			<view
			class="changeList-icon" @tap="changeList"
			:style="{'background-image':'url('+$store.state.baseImg+'/icon/tab.png)'}"></view>
		</view>
		<!-- #endif -->
		<view class="card clearFix">
			<view class="isLoading" v-if="isLoading">
				<u-loading mode="circle" size="50"></u-loading>
			</view>
			<template v-else>
				<view v-show="!$store.state.machineClassShow" v-if="showDeviceList.length > 0" class="clearFix">
					<view :style="{'width':listFlag ? '100%':'50%'}" class="device-item" v-for="(item,index) in showDeviceList" :key="index" @tap="goDevice(item,switchClass(item.r1))">
						<view :class="['deviceIcon']" :style="{
							'background-image':'url('+ $classNameUrl(switchClass(item.r1)) +')'
						}"></view>
						<view class="device-des">
							<view class="title"><text>{{item.r3}}</text></view>
							<text v-if="item.r4 > 0" class="danger-des">{{listFlag?'该设备正在告警，请尽快处理':'该设备正在告警'}}</text>
							<text v-else class="nomal-des">该设备正常运行中</text>
						</view>
						<view :class="['msg-poup',listFlag?'isColumn':'']" :style="{
							'background-image':'url('+$classNameUrl(alarmLevel(item.r2))+')'
						}" v-if="item.r4 > 0">
							<text class="alarm-tips">{{item.r4}}</text>
						</view>
						<u-icon name="arrow-right" color="#212c67" size="28" class="right-icon" v-show="listFlag"></u-icon>
					</view>
				</view>
				<!-- 点击展示内部的机房分类机房 -->
				<machineRoomClass v-if="$store.state.machineClassShow" :isList="listFlag" :obj="machineRoomChoose" :roomId="roomId" :className="className"></machineRoomClass>
				<view class="noData" v-if="showDeviceList.length == 0">
					<text class="nodata-text">暂无数据</text>
				</view>
			</template>
		</view>
	</view>
	</view>
</template>

<script>
	import tabBar from "../../components/navTab/navTab.vue";
	import machineRoomClass from "../../components/machineRoomClass/index.vue";
	import navigationTop from "@/components/navigationTop/index.vue";
	import {throttle,switchDeviceType,rpxToPx} from "../../common/utils/index.js";
	const windowWidth = getApp().globalData.sysWidth;
	export default {
		components:{tabBar,machineRoomClass,navigationTop},
		data() {
			return {
				sysVersion: getApp().globalData.sysEdition,
				className: "", // 点击小分类传的类名
				roomId: "",
				isLoading: false,
				machineRoomChoose:{},
				roomName: "", //机房名称
				hasFixed: false,
				listFlag: false, //是否为单列排列
				showDeviceList: [], //用于展示的分类列表
				classDeviceList:{}, //分类后的列表
				tabList:[
					{
						name:'总览',
						count:"0"
					},
					{
						name:'动力',
						count:""
					},
					{
						name:"环境",
						count:""
					},
					{
						name:"消防",
						count:""
					},
					{
						name:"安防",
						count:""
					}
				]
			}
		},
		onPageScroll:function(val){
			const px = rpxToPx(149,windowWidth)
			if(val.scrollTop > px){
				this.hasFixed = true
			}else{
				this.hasFixed = false
			}
		},
		onLoad(option) {
			this.getData(option);
		},
		computed:{
			switchClass(){
				return function(val){
					const className = switchDeviceType(val);
					return className
				}
			},
			alarmLevel(){
				return function(val){
					let level = "";
					switch (val){
						case "1":
						level = "fx-pao-blue"
							break;
						case "2":
							level = "fx-pao-yellow"
							break;
						case "3":
							level = "fx-pao-orange"
							break;
						default:
							level = "fx-pao-red"
							break;
					}
					return level
				}
			}
		},
		methods: {
			getData(option){
				this.isLoading = true;
				const {roomId,roomName} = option;
				this.roomId = roomId;
				this.roomName = roomName;
				this.$http.httpRequest({
					url: this.$api.roomViewData,
					data:{
						roomId
					},
					methods:"get"
				}).then((res)=>{
					this.isLoading = false;
					if(!res){
						return uni.showToast({
							title:"服务器请求异常",
							icon:"none"
						})
					}
					//设备类型列表 剔除 ‘其他’ 类型
					const deviceList = res.data.typeList.filter((item)=>{
							return item.r5 != '其他';
					})
					let wholeNum = 0 //总览大类型告警个数
					res.data.bigType.forEach((item)=>{
						wholeNum += item.r3*1
					})
					this.tabList.forEach((item)=>{
						if(item.name == '总览'){
							item.count = wholeNum;
							item['alarmLevel'] = ""
						}
						res.data.bigType.forEach((its)=>{
							if(item.name == its.r1){
								item.count = its.r3;
								item['alarmLevel'] = its.r2
							}
						})
					})
					this.classDeviceList = this.classificationType(this.tabList , deviceList) //将大类型分类后
					this.showDeviceList = this.classDeviceList['总览']
				}).catch((err)=>{
					this.isLoading = false;
				})
			},
			goDevice(item,className){ //点击设备
				this.machineRoomChoose = item;
				this.className = className;
				this.$store.commit("set_machineClassShow",true);
			},
			// 对大类型进行分类 bigTypeList:大类型列表 smallTypeList:需要分类的类型列表
			classificationType(bigTypeList,smallTypeList){
					const typeObj = {};
					if(bigTypeList==undefined || smallTypeList==undefined){
						throw new TypeError('classificationType params1,parmas2: 必填');
					}
					if(!(JSON.parse(JSON.stringify(bigTypeList)) instanceof Array)){
						throw new TypeError('classificationType parmas1:接受Array');
					}
					if((!(JSON.parse(JSON.stringify(smallTypeList)) instanceof Array))){
						throw new TypeError('classificationType parmas2:接受Array');
					}
					bigTypeList.forEach((item)=>{
						typeObj[item.name] = [];
					})
					for(let i in typeObj){
						if(i == '总览'){
							typeObj[i] = smallTypeList;
						}
						smallTypeList.forEach((item)=>{
							if(item.r5 == i){
								typeObj[i].push(item);
							}
						})
					}
					return typeObj;
			},
			// tab切换的时候
			changeIndexTab(val){
				this.$store.commit("set_machineClassShow",false) //用于切换点击分类，显示内部分类列表
				const tabName = this.tabList[val]
				this.showDeviceList = this.classDeviceList[tabName.name]
			},
			fixed(){
				this.hasFixed = true
			},
			unfixed(){
				this.hasFixed = false
			},
			changeList(){
				this.listFlag = !this.listFlag
			}
		},
		beforeDestroy() {
			this.$store.commit('set_machineClassShow',false)
		}
	}
</script>

<style lang="scss" scoped>
$topTitleHeight:80rpx; //顶部title高度
.main-bg{
	background-color: $main-bg-bgColor;
	.top-title{
		display: flex;
		align-items: center;
		width: $baseWidth;
		margin: 0 auto 70rpx auto;
		padding-top: 42rpx;
		height: $topTitleHeight;
		.top-img{
			width: 84rpx;
			height: 77rpx;
		}
		.top-text{
			font-size: 30rpx;
			color: $ky-main-color;
			margin-left: 23rpx;
			line-height: $topTitleHeight;
		}
	}
	.tab-bar{
		padding-left: 32rpx;
		padding-right: 32rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 300;
		transition: background-color .3s; 
		.tabBar-box{
			padding: 0 40rpx 0 0;
			flex-grow: 1;
		}
		.changeList-icon{
			width: 45rpx;
			height: 45rpx;
			background-repeat: no-repeat;
			background-size: contain;
		}
	}
	.card{
		width: $baseWidth;
		margin: 30rpx auto 62rpx auto;
		border-radius: $card-box-radius;
		padding: 0 32rpx;
		background-color: rgba(255,255,255,0.8);
		box-shadow: $card-box-shadow;
		min-height: 960rpx;
		position: relative;
		.noData{
			padding-top: 120rpx;
			text-align: center;
			.nodata-text{
				font-size: 25rpx;
				color: #999;
			}
		}
		.isLoading{
			text-align: center;
			padding-top: 120px;
		}
		.device-item{
			float: left;
			display: flex;
			height: 160rpx;
			align-items: center;
			padding: 0 12rpx;
			position: relative;
			.msg-poup{
				position: absolute;
				width: 62rpx;
				height: 55rpx;
				background-repeat: no-repeat;
				background-size: contain;
				background-position: 50% 50%;
				top: 9rpx;
				right: 86rpx;
				z-index: 20;
				.alarm-tips{
					color: #fff;
					font-size: 20rpx;
					text-align: center;
					line-height: 49rpx;
					width: 100%;
					display: block;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
			.msg-poup.isColumn{
				right: 42rpx;
				top: 50%;
				transform: translateY(-50%);
			}
			.right-icon{
				position: absolute;
				right: 0rpx;
				top: 50%;
				transform: translateY(-50%);
			}
			.device-des{
				display: flex;
				flex-direction: column;
				margin-left: 22rpx;
				position: relative;
				z-index: 30;
			}
			.title{
				width: 188rpx;
				display: block;
				font-size: 26rpx;
				margin-bottom: 16rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.danger-des,.nomal-des{
				font-size: 21rpx;
			}
			.danger-des{
				color: $dangerColor;
			}
			.nomal-des{
				color: $defaultColor;
			}
		}
	}	
	.deviceIcon{
		width: 64rpx;
		height: 55rpx;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: 50% 50%;
	}
}
</style>
